<template>
  <div class="header">
    <div class="header-title">{{ this.$store.state.nav.titlename }}</div>
    <h2 class="time">{{ this.datetime }}</h2>
    <!-- <router-link tag="a" target="_blank" :to="{ name: 'Index' }" class="deploy">
      <img
        src="../../assets/images/img42.png"
        class="btn-imgs"
        style="width: 0.34rem"
      />
    </router-link>
    <div class="header-content">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <img
            src="../../assets/images/img43.png"
            class="btn-imgs"
            style="width: 0.36rem"
        /></span>
        <el-dropdown-menu slot="dropdown" align="center">
          <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div> -->
  </div>
</template>

<script>
//import store from '../../store'
import { WebScoket2 } from "@/api/websocket2.js";
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  mixins: [WebScoket2],
  data() {
    return {
      datetime: "",
      type:''
    };
  },
  mounted() {
    setInterval(item => {
      this.date();
    }, 1000);
    this.initWebSocket4();
 
  },
  destroyed() {
    this.websock4.close(); // 离开路由之后断开websocket连接
  },
  created() {
    this.date();
    this.getname();
  },
  methods: {
    websocketonmessage4(e) {
      var that = this
      if(e.data == 'alarm'){
        that.handleSpeak('数据上传中断,数据上传中断,数据上传中断');
      }
      this.$bus.$emit('isAlarm',e.data)
    },
    handleSpeak(text) {
      msg.text = text;
      msg.lang = "zh-CN";
      msg.volume = "1";
      msg.rate = 1;
      msg.pitch = 1;
      synth.speak(msg);
    },
    // 语音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    },
    // logOut() {
    //   this.$store.commit('clearToken')
    //   this.$store.commit('clearList')
    //   location.reload()
    // }
    // async logOut() {
    //   this.$confirm('确定注销并退出系统吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       this.$store.dispatch('LogOut').then(() => {
    //         location.href = '/index'
    //       })
    //     })
    //     .catch(() => {})
    // },
    getname() {
      this.$store.commit("gettitlename");
    },
    date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds()
      };
      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
      this.datetime =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  background: url(../../assets/images/top.png) no-repeat;
  background-size: 100% 100%;
  .header-title {
    height: 60px;
    line-height: 50px;
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 0 10px rgb(128, 241, 241);
    letter-spacing: 10px;
    text-align: center;
  }
  .deploy {
    position: absolute;
    right: 85px;
    top: 18px;
    color: #dedee4;
    font-size: 24px;
    cursor: pointer;
  }
  .btn-imgs {
    vertical-align: middle;
  }
  .header-content {
    position: absolute;
    right: 20px;
    top: 0px;
    .el-dropdown {
      float: right;
      padding: 17px 5px;
      cursor: pointer;
      .iconfont {
        font-size: 26px;
        color: #dedee4;
      }
    }
  }
  .time {
    color: #01b1e0;
    position: absolute;
    right: 0.35rem;
    top: 0.23rem;
    font-size: 0.2rem;
  }
}
</style>
